<template>
	<view>
		<image :src="this.info.fpicture" mode=""></image>
		<view class="instoduction">
			<view class="name">
				{{this.info.fname}}
			</view>
			<view class="store">
				描述:<text class="content">{{this.info.ingredients}}</text>
			</view>
			<view class="store">
				做法:<text class="content">{{this.info.practice}}</text>
			</view>
		</view>
		<view class="more" @click="getMore()">
			查看更多详情
		</view>
	</view>
</template>

<script>
	import { foodsDeails } from '../../api/foods.js'
	export default {
		data() {
			return {
				id: '',
				info: {} // url 为跳转地址
			};
		},
		onLoad(e) {
		  this.id = e.id
		},
		mounted() {
		  this.getfoodDeatils()
		},
		methods: {
			// 获取菜品详情
			async getfoodDeatils () {
				const res = await foodsDeails({fid: this.id})
				this.info = res.data.data.data
			},
			// 查看更多
			 getMore () {
				 window.location.href = this.info.furl
			 }
		}
	}
</script>

<style lang="scss" scoped>
	image {
		width: 100%;
		height: 400rpx;
	}
	.instoduction {
		background-color: #fff;
		width: 700rpx;
		margin: 0 auto;
		padding: 24rpx;
		margin-top: 18rpx;
		box-shadow: 0 8rpx #f0f0f0;
		.name {
			font-weight: bold;
			color: $theme-color;
		}
		.store {
			font-size: 32rpx;
				.content {
				 	color: #999;
				 	font-size: 24rpx;
				 	padding-left: 18rpx;
				 }
		}
	}
	.more {
		color: $theme-color;
		font-weight: bold;
		text-align: center;
		line-height: 72rpx;
		margin-top: 18rpx;
	}
</style>
